<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        title: {
          text: '年度进出港船舶种类分布情况',
          bottom: '5',
          left: 'center',
          show: true,
          textStyle: {
            color: '#FFF',
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#FB3878', '#B33ECC', '#472AF9', '#FFBF24'],
        legend: {
          top: '30%',
          right: '3%',
          orient: 'vertical',
          itemGap: 30,
          textStyle: {
            color: '#FFF',
            fontWeight: 'bold',
            fontSize: '16',
          },
        },
        series: [
          {
            type: 'pie',
            // roseType: 'area',
            radius: ['25%', '40%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'left',
              formatter: ' {c}',
              color: '#FFC425',
              fontWeight: 'bold',
              fontSize: '14',
              padding: '10',
            },
            labelLine: {
              show: false,
            },
            data: [{
              name: '散货船',
              value: '25'
            },
              {
                name: '其他',
                value: '12'
              },
              {
                name: '危险品船',
                value: '30'
              }],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
